import React from 'react';
import { Space, Card, Tabs, Table } from 'antd';
import SearchBar from '@/components/SearchBar/index.jsx';
import { useTable } from '@/hooks/useTable.jsx';
import styles from './index.module.scss';

const columns = [
    {
        title: 'Name',
        dataIndex: 'nat',
        key: 'nat',
    },
    {
        title: 'Age',
        dataIndex: 'gender',
        key: 'gender',
    },
    {
        title: 'Address',
        dataIndex: 'email',
        key: 'email',
    },
    {
        title: 'Tags',
        key: 'gender',
        dataIndex: 'gender',
    },
    {
        title: 'Action',
        key: 'action',
    },
];

const Order = () => {
    const {
        loading,
        total,
        data,
        pageSize,
        pageIndex,
        handleChangePage,
        setSearch,
    } = useTable({ api: `https://randomuser.me/api/?results=${15}&inc=name,gender,email,nat,picture&noinfo` });

    return (
        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
            <SearchBar
                title="订单管理"
                loading={loading}
                onSearch={setSearch}
            />
            <Card className={styles.card}>
                <Tabs
                    defaultActiveKey="1"
                    type="card"
                    items={new Array(3).fill(null).map((_, i) => {
                        const id = String(i + 1);
                        return {
                            label: `Card Tab ${id}`,
                            key: id,
                        };
                    })}
                />
                <Table
                    // rowKey="nat"
                    columns={columns}
                    dataSource={data}
                    pagination={{
                        current: pageIndex,
                        pageSize,
                        total,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        showTotal: (T) => `共 ${T}`,
                        onChange: handleChangePage,
                    }}
                />
            </Card>
        </Space>
    );
};
export default Order;
